import React, {useEffect, useState} from "react";
import {Button, Col, Form, Input, message, Modal, Radio, Row, Select, Table, TreeSelect} from 'antd';

import {setKeyUtils} from "@/utils/Z";
import {addUser, getAuthRole, getUser, updateAuthRole, updateUser} from "@/clientApi/system/user";
import styles from "./index.module.css";


// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    OnCanCle: () => void;
    record: any;

}
interface initialQueryParamstype{
    pageNum: number,
    pageSize: number,
    userId?:number|string,
}
const AuthRoleView: React.FC<MyComponentProps> = (props) => {
    const [form] = Form.useForm();
    useEffect(() => {
        if(props.record.userId){
            handleGetAuthRole(props.record.userId)
        }

    }, [props.record?.userId]);
    const initialQueryParams:initialQueryParamstype = {
        pageNum: 1,
        pageSize: 10,


    };
    const columns = [
        {
            title: '角色编号',
            dataIndex: 'roleId',
            key: 'roleId',
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            key: 'roleName',
        },
        {
            title: '权限字符',
            dataIndex: 'roleKey',
            key: 'roleKey',
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
    ];
    // 表格数据
    const [dataList, setDataList] = useState([])
    const [queryParams, setQueryParams] = useState<initialQueryParamstype>(initialQueryParams)
    const [total, setTotal] = useState(0);
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]);

    function handleGetAuthRole(userId: string) {
        getAuthRole(userId).then((res: any) => {
            if (res.code === 200) {
                setQueryParams({
                    ...queryParams,
                    ...res.user
                })
                setDataList(setKeyUtils(res.roles, {key: 'roleId'}))
                setTotal(res.roles?.length)
                let RowKeyList:any[] = []
                res.roles?.forEach((item: any) => {
                    if (item.flag) {
                        RowKeyList.push(item.roleId)
                    }
                })
                setSelectedRowKeys(RowKeyList)

            }
        })

    }

//     提交修改
    function handleSubmit() {
        const rIds = selectedRowKeys.join(",");
        updateAuthRole({userId: queryParams.userId, roleIds: rIds}).then((res:any) => {
            props.OnCanCle();
        });
    }

// 分页变化
    const handleTableChange = (page: number, pageSize: number) => {
        setQueryParams({
            ...queryParams,
            pageNum: page,
            pageSize: pageSize,
        });
    };
    // 复选框选择参数赋值
    const onSelectChange = (newSelectedRowKeys: any) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };
    // 复选框函数
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    function handleCancel() {
        props.OnCanCle()
    }


    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={null}
                onCancel={() => {
                    props.OnCanCle()
                }}
            >
                <Row gutter={10}>
                    <Col span={24}>
                        <Table columns={columns}
                               dataSource={dataList}
                               rowSelection={rowSelection}
                               pagination={{
                                   current: queryParams.pageNum,
                                   pageSize: queryParams.pageSize,
                                   total: total,
                                   showSizeChanger: true, // 显示分页尺寸切换器
                                   pageSizeOptions: ['10', '20', '50'], // 分页尺寸选项
                                   onChange: handleTableChange,
                                   onShowSizeChange: handleTableChange, // 如果需要支持 pageSize 变化
                               }} />
                    </Col>
                    <Col span={24}>
                        <Form.Item
                            wrapperCol={{offset: 16, span: 8}}
                        >
                            <div className={styles.buttonClass}>
                                <Button type="primary" htmlType="submit" onClick={handleSubmit}>确认</Button>
                                <Button type="primary" onClick={handleCancel}>取消</Button>
                            </div>
                        </Form.Item>
                    </Col>
                </Row>
            </Modal>
        </>
    )
};
export default AuthRoleView;
